<?php include THEMES_PATH.'public/before_body2.phtml';?>
<link href="/statics/front/css/article.css" rel="stylesheet">
</head>
<body>
<?php include THEMES_PATH.'public/header2.phtml';?>
<div class="main-width mt2x mb2x">
  <p class="align-center title mb1x"><?php echo L('_how_customize_2');?></p>
  <p class="align-center text"><?php echo L('_how_customize_3');?></p>
  <ul class="tabs js-tabs mt2x">
    <li class="active">
      <i>1.</i>
      <strong><?php echo L('_how_customize_4');?></strong>
    </li>
    <li>
      <i>2.</i>
      <strong><?php echo L('_how_customize_5');?></strong>
    </li>
    <li>
      <i>3.</i>
      <strong><?php echo L('_how_customize_6');?></strong>
    </li>
  </ul>
  <div class="mb2x tab-cnt js-tab-cnt">
    <div class="clear pannel show">
      <p class="pull-left column text" style="mb1x:10px;"><?php echo L('_how_customize_7');?></p>
      <div class="pull-right column"><img src="/statics/front/images/article/1.jpg" /></div>
    </div>
    <div class="clear pannel">
      <p class="pull-left column"><?php echo L('_how_customize_8');?></p>
      <div class="pull-right column"><img src="/statics/front/images/article/2.jpg" /></div>
    </div>
    <div class="clear pannel">
      <p class="pull-left column"><?php echo L('_how_customize_9');?></p>
      <div class="pull-right column"><img src="/statics/front/images/article/3.jpg" /></div>
    </div>
  </div>
  <p class="title" id="FREE WORLDWIDE SHIPPING"></p>
  <p class="align-center title mb1x"><?php echo L('_new_how_customize_1');?></p>
  <p class="align-center text mb2x"><?php echo L('_new_how_customize_2');?></p>
  <div class="clear align-center mb2x">
    <div class="col-md-6 align-right"><img src="/statics/front/images/article/bag.jpg" alt="背包" /></div>
    <p class="col-md-6 text-bold mt5x"><?php echo L('_new_how_customize_3');?></p>
  </div>
  <p class="title mb1x" id="ZERO-RISK SHOPPING"></p>
  <p class="align-center title mb1x"><?php echo L('_new_how_customize_4');?></p>
  <ul class="align-center mb3x main-width">
    <li class="col-md-4">
      <strong class="text-bold"><?php echo L('_new_how_customize_5');?></strong>
      <p class="text mt1x"><?php echo L('_new_how_customize_6');?></p>
    </li>
    <li class="col-md-4">
      <strong class="text-bold"><?php echo L('_new_how_customize_7');?></strong>
      <p class="text mt1x"><?php echo L('_new_how_customize_8');?></p>
    </li>
    <li class="col-md-4">
      <strong class="text-bold"><?php echo L('_new_how_customize_9');?></strong>
      <p class="text mt1x"><?php echo L('_new_how_customize_10');?><span style="color:#ff9600;"><?php echo L('_new_how_customize_11');?></span></p>
    </li>
  </ul>
  <img src="/statics/front/images/article/banner-how-it-works.jpg" alt="如何定制">
</div>
<?php include THEMES_PATH.'public/footer2.phtml';?>
<script>
$(function() {
	var mouseoverEvent = unifyMobileDesktop.compatibleEvent({
			mobile: 'touchend',
			desktop: 'mouseover'
		}),
		mouseoutEvent = unifyMobileDesktop.compatibleEvent({
			mobile: 'touchend',
			desktop: 'mouseout'
		}),
		$tab = $('.js-tabs').find('li'),
		$tabCnt = $('.js-tab-cnt').find('> div'),
		count = $tab.length,
		index = 0,
		timer = null,
		switchTab = function(currentIndex) {
			$tab.eq(currentIndex).addClass('active').siblings().removeClass('active');
			$tabCnt.eq(currentIndex).addClass('show').siblings().removeClass('show');
		},
		autoSwitch = function() {
			timer = setTimeout(function() {
				if (index < count - 1) {
					index++;
				} else {
					index = 0;
				}
				switchTab(index);
				timer = setTimeout(arguments.callee, 3000);
			}, 2000);
		};
	$tab.on(mouseoverEvent, function() {
		if (timer) {
			clearTimeout(timer);
		}
		index = $(this).index();
		switchTab(index);
	}).on(mouseoutEvent, function() {
		autoSwitch();
	});
	if (!unifyMobileDesktop.isSupportTouch()) {
		$tabCnt.hover(function() {
			if (timer) {
				clearTimeout(timer);
			}
		}, function() {
			autoSwitch();
		});
	}
	autoSwitch();
});
</script>
<?php include THEMES_PATH.'public/after_body.phtml';?>